import { useEffect, useState } from 'react';
import style from './index.module.scss';
import logo from '@/assets/images/logo.png';
const Index = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const [info, setInfo] = useState({
        title: '房间标题',
        roomNumber: '房间编号',
        image: logo,
    });

    const getData = () => {
        const roomId = urlParams.get('roomId');
        fetch(
            `https://webapi.pupupal.com/room/room/umengFindRoomInfo?roomId=${roomId}`,
            {
                method: 'GET',
            }
        )
            .then((response) => response.json())
            .then((response) => {
                if (response.code === 200 && response.data) {
                    setInfo(response.data);
                } else {
                    console.error(
                        'Failed to fetch ranking data:',
                        response.msg
                    );
                }
            })
            .catch((error) =>
                console.error('Error fetching ranking data:', error)
            );
    };

    const loadScript = () => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://g.alicdn.com/jssdk/u-link/index.min.js';
        document.getElementsByTagName('head')[0].appendChild(script);
    };

    const initUmeng = () => {
        window.ULink([
            {
                id: 'usr1bnblebta1nmc', // 后台生成的裂变活动LinkID
                data: {
                    // 传递的自定义动态参数
                    roomId: urlParams.get('roomId'),
                    userId: urlParams.get('userId'),
                },
                selector: '#openApp', //按钮的名称
                // 可选高级功能，具体含义请看下方U-Link API文档
                // auto: true,
                // timeout: 2000,
                // lazy: false,
                useClipboard: true,
                useOpenInBrowerTips: 'default',
                proxyOpenDownload: function (defaultAction, LinkInstance) {
                    console.log('------');
                    console.log(window.ULink.isWechat, window.ULink.isQQ);
                    if (window.ULink.isWechat || window.ULink.isQQ) {
                        // 在qq或者微信环境执行内置逻辑，具体内置逻辑为:当设置了useOpenInBrowerTips字段时，qq&&微信&&scheme时，启用蒙层提示去浏览器打开
                        defaultAction();
                    }
                    if (LinkInstance.solution.type === 'scheme') {
                        // qq或者微信环境特殊处理下
                        if (window.ULink.isWechat || window.ULink.isQQ) {
                            // 在qq或者微信环境执行内置逻辑，具体内置逻辑为:当设置了useOpenInBrowerTips字段时，qq&&微信&&scheme时，启用蒙层提示去浏览器打开
                            defaultAction();
                        } else {
                            window.location.href =
                                LinkInstance.solution.downloadUrl;
                        }
                    } else if (LinkInstance.solution.type === 'universalLink') {
                        // universalLink 唤起应当由服务端提供一个带重定向到appstore的universallink地址。因此，此处不应写逻辑，友盟已于6月2日上线universalLink生成及重定向功能。
                    }
                },
            },
        ]);
    };

    useEffect(() => {
        // loadScript();
        getData();
        initUmeng();
    }, []);
    return (
        <div className={style.container}>
            <div className={`${style.top}`}>
                <div className={style.box}>
                    <img src={logo} alt="logo" />
                    <div className={style.text}>
                        <div className={style.p1}>PUPU找搭子</div>
                        <div className={style.p2}>找到与你契合的灵魂搭子</div>
                    </div>
                </div>

                <div className={style.download} id="openApp">
                    立即下载
                </div>
            </div>
            <div className={style.content}>
                <img className={style.cover} src={info.image} alt="" />
                <div className={style.name}>{info.title}</div>
                <div className={style.id}>ID:{info.roomNumber}</div>
            </div>
            <div className={`${style.btn}`} id="openApp">
                进入房间开始畅聊
            </div>
        </div>
    );
};

export default Index;
